<template>
  <div class="address">
    <div class="content">
      <md-scroll-view ref="scrollView" :auto-reflow="true" :scrolling-x="false">
        <address-item
          v-for="(item, index) in result"
          :info="item"
          :key="index"
        ></address-item>
      </md-scroll-view>
    </div>
    <div class="btn-wrapper">
      <md-button
        type="default"
        round
        @click="$commonJs.goPage('personAddAddress')"
        ><span class="iconfont iconplus"></span> 添加地址</md-button
      >
    </div>
  </div>
</template>

<script>
import { ScrollView, Button } from "mand-mobile";
export default {
  name: "index",
  components: {
    [Button.name]: Button,
    [ScrollView.name]: ScrollView,
    addressItem: () => import("@/components/shoppingCart/addressItem")
  },
  data() {
    return {
      result: []
    };
  },
  methods: {
    getAddressInfo() {
      this.$ajax
        .post(this.$api.addressList, false, false)
        .then(res => {
          this.result = res.data.data;
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    chooseAddress(id) {
      let obj = {
        id: this.order.id,
        address: id
      };
      this.$store.dispatch("changeOrder", obj);
      this.$router.go(-1);
    }
  },
  created() {
    this.getAddressInfo();
  },
  computed: {
    order() {
      return this.$store.state.order;
    }
  }
};
</script>

<style scoped lang="stylus">
.address{
  background white
  height 100%
  flex_content();
  flex_column();
  .content{
    flex: auto;
    height: 100%;
    overflow: hidden;
  }
  .btn-wrapper{
    height 108px;
    flex_content();
    .iconplus{
      font-weight bold;
      display inline-block;
      margin-right 16px
    }
  }
}
</style>
